<template>
	<view class="content">
		<!-- 滚动信息 -->
		<u-notice-bar :text="message"></u-notice-bar>

		<JCalendar 
			:yearMonth="current"
			:dataSource="list"
			@dateChange="getData"
			@clickChange="clickSign"
		>
		</JCalendar>

		 <view class='count'>
			<view>本月累积打卡<text class="sum">{{list.length}}</text>天，请再接再厉，继续努力!</view>
		</view>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>

<script>
	import JCalendar from '@/components/calendar/j-calendar.vue';
	export default {
		components: {
            JCalendar
        },
		onReady(){
			if(Object.getOwnPropertyNames(this.business).length <= 0 || !this.business.id){
				this.$refs.notice.show({
					message:"请先登录",
					duration:1000,
					complete:()=>{
						uni.$u.route({
							type:"switchTab",
							url:'/pages/business/index'
						})
					}
				})
			}
		},
		created()
		{
			this.business = uni.getStorageSync("business")?uni.getStorageSync("business"):{}
			//获取当前用户当前任务的签到状态
			this.getData(this.current);
		},
		data()
		{
			return {
				message: '每日签到可以获得超值优惠大奖，并且会获得相应积分',
				current: parseInt(new Date().getFullYear())+"-"+parseInt(new Date().getMonth() + 1), //本月
				list: [],
				business:{}
			}
		},
		methods: {
			// 点击签到或补签事件，回调参格式“YYYY-MM-DD”
			async clickSign (day) 
			{
				let result = await uni.$u.http.post("/checkin/sign",{day,busid:this.business.id})				
				this.list.push(day);
			},
			//切换月份事件，获取当前用户该任务的签到数组
			async getData(date)
			{
				let result = await uni.$u.http.post("/checkin/index",{busid:this.business.id,time:date})
				if(!result.code){
					this.list = []
				}else{
					this.list = []
					result.data.map(item=>{
						this.list.push(item.createtime_text)
					})
				}
			},
		}
	}
</script>

<style>
	.count {
		margin: 10px;
		padding: 10px;
		display: flex;
		text-align: center;
		border-radius: 10px;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		align-items: center;
	}

	.sum {
		color: red;
		font-size: 20px;
	}

	.count text {
		margin: 5px;
	}
</style>
